export const addTaskProgressComponent = (editor) => {
    const { Components } = editor;

    Components.addType('task-progress', {
        model: {
            defaults: {
                name: 'addTaskProgressComponent',
                tagName: 'div',
                attributes: { class: 'progress',progress:80},
                traits: [
                    {
                        type: 'number',
                        label: '进度',
                        name: 'progress',
                        changeProp: 1,
                        min: 0,
                        max: 100,
                        default: 80
                    }
                ],
                components: [
                    {
                        tagName: 'div',
                        draggable: false, // 不可拖动
                        attributes: { class: 'skill-box' },
                        components: [
                            {
                                tagName: 'div',
                                draggable: false, // 不可拖动
                                components: [
                                    {
                                        type: 'text',
                                        attributes: { class: 'title' },
                                        draggable: false, // 不可拖动
                                        content: '三维建模课程'
                                    },
                                    {
                                        tagName: 'div',
                                        draggable: false, // 不可拖动
                                        attributes: { class: 'skill-bar-wrapper' },
                                        components: [
                                            {
                                                tagName: 'div',
                                                attributes: { class: 'skill-bar' },
                                                droppable: false, // 不允许其他模块拖入
                                                draggable: false, // 不可拖动
                                                components: [
                                                    {
                                                        tagName: 'span',
                                                        attributes: { class: 'skill-per' },
                                                        draggable: false,
                                                        droppable: false, // 不允许其他模块拖入
                                                    },
                                                ],
                                            },
                                            {
                                                type: 'text',
                                                attributes: { class: 'tooltip' },
                                                draggable: false,
                                                content: '50%',
                                            }
                                        ],
                                    }
                                ]
                            },
                        ],
                    },
                ],
                styles: `
                    .progress {
                        position: relative;
                        max-width: 300px;
                        width: 100%;
                        background: #ececec;
                        margin: 0 15px;
                        padding: 10px 20px;
                        border-radius: 7px;
                    }
                    .progress .skill-box {
                        width: 100%;
                        margin: 15px 0;
                    }
                    .skill-box .title {
                        display: block;
                        font-size: 14px;
                        font-weight: 600;
                        color: #333;
                    }
                    .skill-box .skill-bar-wrapper {
                        display: flex;
                        align-items: center;
                        display:flex;
                    }
                    .skill-box .skill-bar {
                        height: 8px;
                        width: 100%;
                        border-radius: 6px;
                        margin: 6px 6px 0 0;
                        background: rgba(0,0,0,0.1);
                    }
                    .skill-bar .skill-per {
                        position: relative;
                        display: block;
                        height: 100%;
                        width: 50%;
                        border-radius: 6px;
                        background: #4070f4;
                        animation: progress 0.4s ease-in-out forwards;
                        opacity: 0;
                    }
                    @keyframes progress {
                        0% {
                            width: 0;
                            opacity: 1;
                        }
                        100% {
                            opacity: 1;
                        }
                    }
                    .skill-per .tooltip {
                        position: absolute;
                        right: -14px;
                        top: -28px;
                        font-size: 9px;
                        font-weight: 500;
                        color: #fff;
                        padding: 2px 6px;
                        border-radius: 3px;
                        background: #4070f4;
                        z-index: 1;
                    }
                `,
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    const progress = this.attributes.progress.value;
                    const skillPer = thx.querySelector('.skill-per');
                    const tooltip = thx.querySelector('.tooltip');
                    skillPer.style.width = progress+`%`;
                    tooltip.innerHTML = `${progress}%`;
                }
            },
            init() {
                let that = this;
                this.on('change:progress', function() {
                    that.get('attributes').progress = that.attributes.progress
                    // 回调script
                    that.trigger("change:script");
                });  
            },
        }
    });

    editor.BlockManager.add('task-progress-block', {
        label: '任务进程组件',
        category: '组件类',
        content: { type: 'task-progress' },
        media: '<svg t="1721487600543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10099" width="30" height="30"><path d="M106.88 64c21.632 0 39.488 15.872 42.496 36.608l0.512 6.336v772.864a42.88 42.88 0 0 1-85.44 6.336l-0.448-6.4V107.008C64 83.2 83.2 64 106.88 64z m810.24 708.48a42.88 42.88 0 0 1 6.272 85.376l-6.336 0.448H300.16a42.88 42.88 0 0 1-6.272-85.376l6.336-0.512h616.96z m-193.28-257.664a42.88 42.88 0 0 1 6.4 85.44l-6.4 0.448H300.16a42.88 42.88 0 0 1-6.4-85.44l6.4-0.448h423.68z m193.28-193.216a42.88 42.88 0 0 1 6.272 85.44l-6.336 0.448H300.16a42.88 42.88 0 0 1-6.272-85.44l6.336-0.448h616.96z m-193.28-193.216a42.88 42.88 0 0 1 6.4 85.44l-6.4 0.448H300.16a42.88 42.88 0 0 1-6.4-85.376l6.4-0.512h423.68z" p-id="10100"></path></svg>'
    });
};



